<template>
  <div class="portal-container">
    <drawer-layout leftWidth="60%">
      <template v-slot:left="{ setFolded }">
        <fks-query-page
          ref="portal"
          v-loading="loading"
          row-key="content.id"
          :page="false"
          :data="treeData"
          :tree-props="{ children: 'children' }"
          highlight-current-row
          :expand-row-keys="defaltExpand"
          :total="total"
          :element-loading-text="LANG.LOADING"
          :table-name="LANG.STM_PORTAL"
          @row-click="changeRow"
          @query="getData"
          @size-change="getData"
        >
          <template slot="singleSearch">
            <div class="single-searchBox"></div
          ></template>
          <template>
            <fks-table-column
              type="index"
              align="center"
              width="50"
              label="#"
            />
            <fks-table-column
              prop="name"
              :label="LANG.PORTAL_NAME"
              header-align="center"
              min-width="400"
              align="left"
              is-link
              @link="clickHandler"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.content.name }}</span>
              </template>
            </fks-table-column>
            <fks-table-column :label="LANG.TYPE" align="center" width="130">
              <template slot-scope="scope">
                {{ scope.row.content.type | transferEnum('portalType') }}
              </template>
            </fks-table-column>
            <fks-table-column :label="LANG.OPERATION" width="230" align="left">
              <template slot-scope="scope">
                <fks-button
                  v-permission="['portal:addChild']"
                  type="text"
                  :disabled="
                    portalType.length &&
                    portalType.length > scope.row.content.type
                      ? false
                      : true
                  "
                  @click.stop="addSubChildHandler(scope.row.content)"
                >
                  {{ LANG.ADD_CHILD }}
                </fks-button>
                <fks-button
                  v-permission="['portal:edit']"
                  type="text"
                  @click.stop="editHandler(scope.row.content)"
                >
                  {{ LANG.EDIT }}
                </fks-button>
                <span
                  v-permission="['portal:delete']"
                  style="margin-left: 11px"
                >
                  <fks-button
                    v-if="scope.row.parentId != '0'"
                    danger-text
                    @click.stop="delHandler(scope.row.content)"
                  >
                    <span>{{ LANG.DELETE }}</span>
                  </fks-button>
                </span>
              </template>
            </fks-table-column>
          </template>
        </fks-query-page>
      </template>
      <template #right
        ><member-table
          :portalId.sync="portalId"
          :portalName="portalName"
        ></member-table>
      </template>
    </drawer-layout>
    <portal-info
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :type="operate_type"
      :data="current_operate_node"
      @refresh="getData"
    />
  </div>
</template>
<script>
import * as portalApi from './api'
import Mix from '@/mixins/module'
import PortalInfo from './PortalInfo/index'
import DrawerLayout from '@/components/DrawerLayout'
import memberTable from './MemberTable'

export default {
  name: 'Portal',
  components: {
    PortalInfo,
    DrawerLayout,
    memberTable
  },
  mixins: [Mix],
  data() {
    return {
      loading: false,
      tableData: [],
      defaltExpand: ['1302785644422082562'],
      layout: 'total, sizes, prev, pager, next, jumper',
      pageSize: 15,
      currentPage: 1,
      total: 0,
      dialogVisible: false,
      current_tree_node: '', //当前选中的节点
      current_tree_node_name: '', //当前选中的节点名称
      current_operate_node: '', //当前操作的节点id
      operate_type: '', //操作方式，有：新增，修改，删除
      treeData: [],
      delList: [],
      order: '',
      portalId: '',
      portalName: ''
    }
  },
  computed: {
    portalType() {
      return this.$store.state.enum.portalType
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    clickHandler({ row }) {
      this.portalName = row.content.name
      if (this.portalId == row.id) {
        return
      }
      this.portalId = row.id
    },
    changeRow(row) {
      this.portalName = row.content.name
      if (this.portalId == row.id) {
        return
      }
      this.portalId = row.id
    },
    //获取数据
    @permission('portal:query')
    getData(getTree) {
      this.loading = true
      portalApi
        .getPortals()
        .then((res) => {
          this.loading = false
          if (res.status) {
            this.treeData = res.data
            this.total = res.data.total
            this.$refs.portal.$refs.table.setCurrentRow(res.data[0])
            this.portalId = res.data[0].id
            this.portalName = res.data[0].content.name
          }
        })
        .catch(() => {
          this.loading = false
          this.treeData = []
          this.total = 0
        })
    },
    //列表中修改按钮事件
    editHandler(data) {
      this.dialogVisible = true
      this.operate_type = 'update'
      this.current_operate_node = data
    },
    // 添加/树结构添加按钮事件
    addSubChildHandler(data) {
      this.operate_type = 'new'
      this.current_operate_node = data
      this.dialogVisible = true
    },
    // 删除按钮事件
    delHandler(data) {
      this.$confirm(this.LANG.DELETE_CONFIRM, this.LANG.TIPS, {
        title: this.LANG.TIPS,
        type: 'warning',
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        confirmButtonClass: 'fks-button--danger',
        deleteMode: true
      })
        .then(() => {
          portalApi
            .deletePortal(data.id)
            .then((res) => {
              if (res.status) {
                this.$message.success(this.LANG.DELETE_SUCCESS)
                //删除后刷新
                this.getData(true)
              }
            })
            .catch(() => {})
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.portal-container {
  width: 100%;
  height: 100%;
  min-width: 498px;
  overflow: hidden;
  background: #f1f2f6;

  ::v-deep .right {
    width: calc(40% - 8px) !important;
    margin-left: 8px;
  }
}
</style>